<!--  -->
<template>
  <div>
    <a-card :body-style="{ padding: '18px' }" :bordered="false">
      <!-- 顶部卡片组 -->
      <!-- <a-descriptions :title="$t('all.autotext547')"></a-descriptions>
      <a-row :gutter="24">
        <a-col
          :sm="24"
          :md="12"
          :xl="6"
          :style="{ marginBottom: '24px' }"
          @click="all"
        >
          <OverviewCard :title="$t('all.autotext1533')" :total="msg == null ? 0 : msg.allNum">
            <a-tooltip slot="action">
              <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
            </a-tooltip>
            <img src="@/assets/6221634179780_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
            <a-progress
              :percent="100"
              :show-info="false"
              stroke-color="#3CC2FF"
              slot="progress"
            />
          </OverviewCard>
        </a-col>

        <a-col
          :sm="24"
          :md="12"
          :xl="6"
          :style="{ marginBottom: '24px' }"
          @click="ongoing"
        >
          <OverviewCard :title="$t('all.autotext1423')" :total="msg == null ? 0 : msg.proceedNum">
            <a-tooltip slot="action">
              <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
            </a-tooltip>
            <img src="@/assets/6231634179780_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
            <a-progress
              :percent="onGoingPercent"
              :show-info="false"
              stroke-color="#43D882"
              slot="progress"
            />
          </OverviewCard>
        </a-col>

        <a-col
          :sm="24"
          :md="12"
          :xl="6"
          :style="{ marginBottom: '24px' }"
          @click="close"
        >
          <OverviewCard :title="$t('all.autotext1160')" :total="msg == null ? 0 : msg.closeNum">
            <a-tooltip slot="action">
              <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
            </a-tooltip>
            <img src="@/assets/6241634179782_.pic.jpg" slot="img" style="width: 50px; margin-right: 10px" />
            <a-progress
              :percent="closePercent"
              :show-info="false"
              stroke-color="#A5B1BE"
              slot="progress"
            />
          </OverviewCard>
        </a-col>

        <a-col
          :sm="24"
          :md="12"
          :xl="6"
          :style="{ marginBottom: '24px' }"
          @click="start"
        >
          <OverviewCard :title="$t('all.autotext778')" :total="msg == null ? 0 : msg.unstartNum">
            <a-tooltip slot="action">
              <a-icon type="right" :style="{ fontSize: '20px', color: '#AFAFAF' }" />
            </a-tooltip>
            <img src="@/assets/WechatIMG39.png" slot="img" style="width: 50px; margin-right: 10px" />
            <a-progress
              :percent="startPercent"
              :show-info="false"
              stroke-color="#A5B1BE"
              slot="progress"
            />
          </OverviewCard>
        </a-col>
      </a-row> -->
      <!-- 表格 -->
      <!-- <a-descriptions :title="$t('all.autotext879')"></a-descriptions>
      <index :switchState="switchState" @sendMsg="getMsg" /> -->

      <div class="center_box">
        <div class="title">{{ $t('all.autotext879') }}</div>
        <a-select
          ref="select"
          v-model="classify"
          style="width: 120px"
          @change="handleChange"
        >
          <a-select-option value="0">{{
            $t('all.autotext1533')
          }}</a-select-option>
          <a-select-option value="2">测试项目</a-select-option>
          <a-select-option value="1">生产项目</a-select-option>
        </a-select>
        <a-button
          v-if="showSponsor"
          type="primary"
          style="margin-left: auto"
          @click="handleExport"
        >
          {{ $t('all.autotext1744') }}
        </a-button>
      </div>

      <!-- 顶部卡片组 -->

      <a-row :gutter="24">
        <a-col class="gutter-row" :span="6">
          <div
            class="gutter-box"
            @click="changeStatus(null)"
            :class="{ 'gutter-box_chang': switchState === null }"
          >
            <img src="@/assets/general_one.jpg" />
            <div class="number_box">
              <div
                style="
                  font-size: 24px;
                  font-weight: 500;
                  color: #031f47;
                  line-height: 32px;
                "
              >
                {{ allNum || 0 }}
              </div>
              <div>{{ $t('all.autotext1533') }}</div>
            </div>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div
            class="gutter-box"
            @click="changeStatus(2)"
            :class="{ 'gutter-box_chang': switchState === 2 }"
          >
            <img src="@/assets/general_two.jpg" />
            <div class="number_box">
              <div
                style="
                  font-size: 24px;
                  font-weight: 500;
                  color: #031f47;
                  line-height: 32px;
                "
              >
                {{ proceedNum || 0 }}
              </div>
              <div>{{ $t('all.autotext1075') }}</div>
            </div>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div
            class="gutter-box"
            @click="changeStatus(3)"
            :class="{ 'gutter-box_chang': switchState === 3 }"
          >
            <img src="@/assets/general_three.jpg" />
            <div class="number_box">
              <div
                style="
                  font-size: 24px;
                  font-weight: 500;
                  color: #031f47;
                  line-height: 32px;
                "
              >
                {{ closeNum || 0 }}
              </div>
              <div>{{ $t('all.autotext892') }}</div>
            </div>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div
            class="gutter-box"
            @click="changeStatus(1)"
            :class="{ 'gutter-box_chang': switchState === 1 }"
          >
            <img src="@/assets/general_four.jpg" />
            <div class="number_box">
              <div
                style="
                  font-size: 24px;
                  font-weight: 500;
                  color: #031f47;
                  line-height: 32px;
                "
              >
                {{ unstartNum || 0 }}
              </div>
              <div>{{ $t('all.autotext1642') }}</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 搜素 -->
      <!--  -->
      <div style="display: flex; align-items: center; margin: 16px 0">
        <a-input-search
          v-model="no"
          :placeholder="$t('all.autotext992')"
          allowClear
          style="width: 240px; margin-right: 16px"
        />
        <a-select
          v-if="!showSponsor"
          v-model="sponsorId"
          show-search
          :placeholder="$t('all.autotext679')"
          style="width: 240px; margin-right: 16px"
          :filter-option="filterOption"
          allowClear
        >
          <a-select-option v-for="list in phaseList" :key="list.id">
            {{ list.orgName }}
          </a-select-option>
        </a-select>
        <!-- <a-select
        style="width: 240px;margin-right:16px"
        v-model="pmAccount"
        show-search
        :filter-option="filterOption"
        :placeholder="$t('all.autotext1348') + $t('all.autotext1253')"
        allowClear
      >
        <a-select-option v-for="list in adminList" :key="list">
          {{ list }}
        </a-select-option>
      </a-select> -->

        <a-button @click="resetQuery" style="width: 100px; margin-left: auto">
          {{ $t('all.autotext340') }}
        </a-button>
        <a-button
          @click="handleSearch"
          type="primary"
          ghost
          style="width: 100px; margin-left: 16px"
        >
          {{ $t('all.autotext30') }}
        </a-button>
        <a-button
          type="primary"
          icon="plus"
          @click="actionAdd"
          v-if="$auth('PROJECT.PROJECT_ADD')"
          style="margin-left: 16px"
        >
          {{ $t('all.autotext1385') }}
        </a-button>
      </div>

      <!-- 列表 -->
      <a-spin :spinning="tableLoading">
        <div class="list_box">
          <a-list
            v-if="dataList?.content?.length < 1"
            :data-source="[]"
            style="margin: 0 auto"
          />
          <template v-if="dataList?.content?.length > 0">
            <a-collapse
              expandIconPosition="right"
              :bordered="false"
              ghost
              v-model="activeKey"
              v-for="(item, index) in dataList?.content"
              :key="index"
              :name="index"
            >
              <template #expandIcon="props">
                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
              </template>
              <template>
                <a-collapse-panel class="table_box" :key="String(index + 1)">
                  <template slot="header">
                    <div class="collapse_panel_header">
                      <div class="flex_class">
                        <div class="contract_number">
                          <img
                            v-if="isNotFormalProject(item)"
                            src="@assets/images/overview/test-item-icon.svg"
                          />
                          {{$t('all.autotext1901')}} {{ item.businessCode }}
                        </div>
                        <a-tag
                          v-if="
                            item.advancedPay == null || item.advancedPay == 0
                          "
                          color="orange"
                          >{{ $t('all.autotext1831') }}</a-tag
                        >
                        <a-tag v-if="item.advancedPay == 1" color="red">{{
                          $t('all.autotext1830')
                        }}</a-tag>
                        <a-tag v-if="item.status == 1">{{
                          $t('all.autotext1410')
                        }}</a-tag>
                        <a-tag
                          v-if="
                            item.cashFlowType == null || item.cashFlowType == 0
                          "
                          color="green"
                          >{{$t('all.autotext1902')}}</a-tag
                        >
                        <a-tag v-if="item.cashFlowType == 1" color="blue"
                          >{{$t('all.autotext1903')}}</a-tag
                        >
                      </div>
                      <div class="flex_class" style="margin-top: 8px">
                        <div style="margin-right: 16px">
                          {{ $t('all.autotext1790') }}
                          {{ formatCurrency(item.contractAmount) }}
                        </div>
                        <div style="margin-right: 16px">
                          {{ $t('all.autotext1904') }} {{ formatCurrency(item.totalAmount) }}
                        </div>
                        <div style="margin-right: 16px">
                          {{ $t('all.autotext1905') }}
                          {{
                            formatCurrency(item.totalAmount - item.usedAmount)
                          }}
                        </div>
                        <div style="margin-right: 16px">
                          {{ $t('all.autotext343') }}
                          {{ formatCurrency(item.paidAmount) }}
                        </div>
                        <div>
                          {{ $t('all.autotext39') }}
                          {{
                            formatCurrency(
                              item.feeServiceAmountToPay +
                                item.feeSearchAmountToPay
                            )
                          }}
                        </div>
                      </div>
                    </div>
                  </template>

                  <!-- 表格开始 -->
                  <a-table
                    ref="table"
                    size="default"
                    :row-key="(record) => record.id"
                    :columns="columns"
                    :pagination="false"
                    :data-source="item.list"
                    :scroll="{ x: 1300 }"
                  >
                    <template v-slot:avBalance>
                      <span>
                        {{ $t('all.autotext1255') }}
                        <a-tooltip
                          :title="
                            item.advancedPay == 1
                              ? $t('all.autotext1910')
                              : item.cashFlowType == 1
                              ? '可⽤⾦额=临床试验项⽬⼊账⾦额-项⽬已⽀付-项⽬待⽀付'
                              : $t('all.autotext1930')
                          "
                        >
                          <a-icon
                            type="exclamation-circle"
                            defaultVisible
                            style="margin-left: 5px"
                          />
                        </a-tooltip>
                      </span>
                    </template>
                    <span slot="no" slot-scope="text, record">
                      <div style="wordbreak: break-all">
                        <img
                          v-if="isNotFormalProject(record)"
                          src="@assets/images/overview/test-item-icon.svg"
                        />
                        {{ text }}
                      </div>
                    </span>
                    <!-- <span slot="createTime" slot-scope="text, record">{{ record.createTime | moment }}</span> -->
                    <span slot="status" slot-scope="text, record">
                      <a-tag v-if="record.status == 1" color="blue">{{
                        $t('all.autotext392')
                      }}</a-tag>
                      <a-tag v-if="record.status == 2" color="green">{{
                        $t('all.autotext1075')
                      }}</a-tag>
                      <a-tag v-if="record.status == 3">{{
                        $t('all.autotext1410')
                      }}</a-tag>
                    </span>
                    <span slot="advancedPay" slot-scope="text, record">
                    {{ renderAdvancedPay(record) }}
                  </span>

                    <span slot="action" slot-scope="text, record">
                      <template>
                        <a-space>
                          <!-- epv1.5 有详情菜单的权限就会有详情按钮的权限，反之也一样 -->
                          <a-button
                            v-if="$menuAuth('PROJECT')"
                            @click="routeToProjectDetail(record)"
                            type="link"
                            class="link-btn"
                            >{{ $t('all.autotext822') }}</a-button
                          >
                          <a-button
                            v-if="
                              isNotFormalProject(record) &&
                              ($auth('PROJECT.PROJECT_CONFIGURATION') ||
                                haveProjectConfigAuth(record))
                            "
                            @click="toConfig(record)"
                            type="link"
                            class="link-btn"
                            >{{ $t('all.autotext1145') }}</a-button
                          >
                        </a-space>
                      </template>
                    </span>
                  </a-table>
                </a-collapse-panel>
              </template>
            </a-collapse>
          </template>

          <a-pagination
            v-model="pageNumber"
            :total="dataList.totalCount"
            show-size-changer
            show-quick-jumper
            :page-size-options="['5', '10', '20', '30']"
            :defaultPageSize="pageSize"
            @change="onChange"
            @showSizeChange="onChange"
          />
        </div>
      </a-spin>
    </a-card>
    <AddModal
      v-model="visible"
      :isEditProject="false"
      @modalOk="addSubmit"
      :isEdit="0"
      :editContent="{}"
    />
    <exportModal ref="exportRef" format="pdf"/>
  </div>
</template>

<script>
import AddModal from './allItems/AddModal.vue'
import { listV3, getProjectAdd } from '@/api/overview/contract'
import { getSponsorList } from '@api/system/user'
import exportModal from '@views/entry/components/exportModal'
import storage from 'store'
import { CURRENT_PROID } from '@/store/mutation-types'
import { getUnread } from '@/api/system/message'
// import { OverviewCard } from '@/components'
// import index from './allItems/index'

export default {
  name: '',
  components: {
    exportModal,
    AddModal
    // OverviewCard,
    // index
  },

  data() {
    return {
      switchState: null,
      no: '',
      sponsorId: undefined,
      pmAccount: undefined,
      classify: '0',
      pageNumber: 1,
      pageSize: 5,
      showSponsor: true,
      proceedNum: '',
      closeNum: '',
      unstartNum: '',
      activeKey: ['1'],
      allNum: '',
      dataList: {},
      phaseList: [],
      visible: false,
      // 表头
      columns: [
        // {
        //   title: this.$t('all.autotext334'),
        //   width: '100px',
        //   dataIndex: 'id',
        //   scopedSlots: { customRender: 'id' }
        // },
        {
          title: this.$t('all.autotext992'),
          width: '180px',
          dataIndex: 'no',
          scopedSlots: { customRender: 'no' }
        },
        // {
        //   title: this.$t('all.autotext873'),
        //   width: '150px',
        //   dataIndex: 'protocolNo'
        // },
        {
          title: this.$t('all.autotext211'),
          width: '250px',
          dataIndex: 'name'
        },
        {
          title: this.$t('all.autotext1273'),
          width: '150px',
          dataIndex: 'sponsorName'
        },
        // {
        //   title: this.$t('all.autotext21'),
        //   dataIndex: 'createTime',
        //   width: '150px',
        //   scopedSlots: { customRender: 'createTime' }
        // },
        // {
        //   title: this.$t('all.autotext1253'),
        //   width: '150px',
        //   dataIndex: 'pmAccount'
        // },
        {
          title: this.$t('all.autotext1906'),
          dataIndex: 'advancedPay',
          scopedSlots: { customRender: 'advancedPay' },
          width: '150px'
        },
        {
          title: this.$t('all.autotext345'),
          dataIndex: 'status',
          width: '150px',
          scopedSlots: { customRender: 'status' }
        },
        // {
        //   title: this.$t('all.autotext480'),
        //   width: '150px',
        //   dataIndex: 'businessAccount'
        // },
        {
          title: this.$t('all.autotext1907'),
          dataIndex: 'budget',
          width: '150px'
        },
        {
          title: this.$t('all.autotext1351'),
          dataIndex: 'usedAmount',
          width: '150px'
        },
        {
          title: this.$t('all.autotext1398'),
          dataIndex: 'toPay',
          scopedSlots: { customRender: 'toPay' },
          width: '150px'
        },
        {
          // title: '可用金额',
          dataIndex: 'avBalance',
          slots: { title: 'avBalance' },
          key: 'avBalance',
          width: '150px'
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'action',
          width: '170px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      tableLoading: false

      // switchState: null,
      // totalNumber: null,
      // onGoingPercent: 0,
      // closePercent: 0,
      // startPercent: 0,
      // msg: null
    }
  },
  created() {
    this.removeStorageProjectID()
    getUnread().then((res) => {
      this.$globalVue.$emit('unReadMsgCount', res)
    })
    this.getRoles()

    this.getInfo()
    // console.log(this.$store.getters.roles[0], 'rrr')
    // this.$store.getters.roles[0]
  },
  mounted() {
    this.getSponsorList()
  },
  methods: {
    isNotFormalProject({ classify }) {
      return classify !== 1
    },
    haveProjectConfigAuth({ configuration }) {
      return configuration === true
    },
    removeStorageProjectID() {
      storage.remove(CURRENT_PROID)
    },
    getRoles() {
      // console.log(this.$store.getters.roles, 'roles')
      // this.classify =
      //   this.$store.getters.roles.length > 0 &&
      //   ['SYS_FINANCE', 'PM'].includes(this.$store.getters.roles[0].code)
      //     ? '1'
      //     : '0'
      this.showSponsor =
        this.$store.getters.roles.length > 0 &&
        ['PM'].includes(this.$store.getters.roles[0].code)
          ? 1
          : 0
    },

    async getInfo() {
      this.tableLoading = true
      let data = {
        no: this.no,
        sponsorId: this.sponsorId === undefined ? '' : this.sponsorId,
        pmAccount: this.pmAccount === undefined ? '' : this.pmAccount,
        classify: this.classify,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        status: this.switchState
      }
      await listV3(data).then((res) => {
        this.proceedNum = res.proceedNum
        this.closeNum = res.closeNum
        this.unstartNum = res.unstartNum
        this.allNum = res.allNum
        this.dataList = res.page
        this.tableLoading = false
      })
    },
    changeStatus(id) {
      this.pageNumber = 1
      this.switchState = id
      this.getInfo()
    },
    handleChange(val) {
      this.pageNumber = 1
      this.classify = val
      this.getInfo()
    },
    // 导出合同费用统计表
    async handleExport() {
      this.$refs.exportRef.open(1)
    },
    // 请求申办方列表
    getSponsorList() {
      getSponsorList({ code: 10001011 }).then((res) => {
        this.phaseList = res
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    // 重置
    resetQuery() {
      this.no = ''
      this.pageNumber = 1
      this.sponsorId = undefined
      this.pmAccount = undefined
      this.getInfo()
    },
    // 查询
    handleSearch() {
      this.pageNumber = 1
      this.getInfo()
    },
    onChange(page, pageSize) {
      // console.log(page, pageSize, '12')
      this.pageNumber = page
      this.pageSize = pageSize
      this.getInfo()
    },
    // 点击新增弹框
    actionAdd() {
      this.visible = true
    },
    // 点击确认新增
    addSubmit(e) {
      getProjectAdd(e).then((res) => {
        this.visible = false
        this.$message.success(this.$t('all.autotext1243'))
        this.pageNumber = 1
        this.getInfo()
        // this.$refs.table.refresh(true)
      })
    },
    // 路由跳转
    routeToProjectDetail(record) {
      if (this.showSponsor) {
        this.$store.dispatch('EnterProject', record).then((res) => {
          this.$router.push({ name: 'high' })
        })
      } else {
        this.$store.dispatch('EnterProject', record).then((res) => {
          this.$router.push({ name: 'Responsible' })
        })
      }
    },
    // 点击配置
    toConfig(record) {
      this.$store.dispatch('EnterProject', record).then((res) => {
        this.$router.push({ name: 'Config' })
      })
    },
    renderAdvancedPay(record) {
      if (record.advancedPay === 1) {
        return this.$t('all.autotext1908')
      } else {
        return this.$t('all.autotext1909')
      }
    },
    formatCurrency(number) {
      // let num = parseFloat(number.toFixed(2))
      let formatter = new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      return formatter.format(number)
      // return num
    }

    // all () {
    //   this.switchState = null
    // },
    // start () {
    //   this.switchState = 1
    // },
    // ongoing () {
    //   this.switchState = 2
    // },
    // close () {
    //   this.switchState = 3
    // },
    // getMsg (info) {
    //   this.msg = info
    //   this.onGoingPercent = parseInt(info.proceedNum * 100 / info.allNum)
    //   this.closePercent = parseInt(info.closeNum * 100 / info.allNum)
    //   this.startPercent = parseInt(info.unstartNum * 100 / info.allNum)
    // }
  }
}
</script>
<style lang="less" scoped>
.center_box {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .title {
    font-size: 20px;
    line-height: 28px;
    color: #031f47;
    padding-right: 16px;
  }
}
.gutter-row {
  cursor: pointer;
  padding: 0 8px;
  .gutter-box {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    img {
      width: 40px;
      height: 40px;
    }
    .number_box {
      padding-left: 16px;
      font-size: 14px;
      color: #687991;
      line-height: 20px;
    }
  }
  .gutter-box_chang {
    border: 1px solid #0087e1;
  }
}
.list_box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  .ant-collapse {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
    .ant-collapse-item {
      border: 0;
      /deep/ .ant-collapse-content-box {
        padding: 0px;
      }
      .ant-collapse-content-box {
        padding: 0;
        .ant-tag {
          border: 0;
        }
      }
    }
    .collapse_panel_header {
      font-size: 14px;
      color: #031f47;
      line-height: 22px;
      .flex_class {
        display: flex;
        align-items: flex-end;
        .contract_number {
          font-size: 16px;
          font-weight: 500;
          padding-right: 16px;
        }
      }
    }
  }
  .ant-pagination {
    margin-top: 16px;
  }
}
</style>
